<template>
  <div class="min-h-screen bg-gray-100 flex items-center justify-center">
    <div class="max-w-md w-full p-6">
      <!-- 标题 -->
      <h1 class="text-4xl font-bold text-center text-gray-800 mb-8">康威生命游戏</h1>
      
      <!-- 菜单列表 -->
      <div class="space-y-4">
        <button 
          @click="$emit('select', 'game')"
          class="w-full py-4 px-6 text-xl bg-blue-500 hover:bg-blue-600 text-white rounded-lg shadow-md transition duration-200 flex items-center justify-between"
        >
          <span>开始游戏</span>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
          </svg>
        </button>
        
        <button 
          @click="$emit('select', 'load')"
          class="w-full py-4 px-6 text-xl bg-green-500 hover:bg-green-600 text-white rounded-lg shadow-md transition duration-200 flex items-center justify-between"
        >
          <span>加载存档</span>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
          </svg>
        </button>
        
        <button 
          @click="$emit('select', 'patterns')"
          class="w-full py-4 px-6 text-xl bg-purple-500 hover:bg-purple-600 text-white rounded-lg shadow-md transition duration-200 flex items-center justify-between"
        >
          <span>预设图案</span>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
          </svg>
        </button>
        
        <button 
          @click="$emit('select', 'about')"
          class="w-full py-4 px-6 text-xl bg-gray-500 hover:bg-gray-600 text-white rounded-lg shadow-md transition duration-200 flex items-center justify-between"
        >
          <span>关于</span>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </button>
      </div>
      
      <!-- 版本信息 -->
      <div class="mt-8 text-center text-gray-500">
        <p>版本 1.0.0</p>
      </div>
    </div>
  </div>
</template>

<script setup>
defineEmits(['select'])
</script> 